/***********************************************/
/* PUBLICATION DASHBOARD ***********************/
/***********************************************/

// Override buttons in footer bar for publication status window
.window-container .engine-panel.publicationstatuswindow-card {
  &.engine-panel.publicationstatuswindow-card > .x-panel-bwrap > .x-panel-bbar .x-panel-fbar {
    @include _button(".button-cancel", "ACTIONBAR", "remove-icons");
    @include _button(".button-bypassworkflow", "ACTIONBAR---SUGGESTED", "remove-icons");
  }
}

div.engine-window.workflowactiondialog-card,
div.publicationstatuswindow-card.engine-window {
  background: unset !important;
  position: fixed !important;
  width: 100% !important;
  height: 100% !important;
  padding-top: calc(5%) !important;
  left: 0 !important;
  top: 0 !important;
  z-index: 1500 !important;

  .indigo-modal-mask {
    position: absolute;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1031 !important;
    background: radial-gradient(ellipse at bottom right, rgba(38, 38, 38, 0.5) 0%, rgba(38, 38, 38, 0.71) 50%) !important;
    background-color: _color("white", a) !important;
    display: block !important;
  }
}

.workflowactiondialog-card.engine-panel,
.publicationstatuswindow-card.engine-panel {

  position: fixed !important;
  width: 100% !important;
  height: 100% !important;
  padding-top: calc(5%) !important;

  top: 0 !important;
  left: 0 !important;
  z-index: 1040 !important;
  display: flex !important;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  background: radial-gradient(ellipse at bottom right, rgba(38, 38, 38, 0.5) 0%, rgba(38, 38, 38, 0.71) 50%) !important;
  background-color: _color("white", a) !important;
}

.workflowactiondialog-card.engine-panel,
div.engine-window.workflowactiondialog-card,
.publicationstatuswindow-card.engine-panel,
div.publicationstatuswindow-card.engine-window {

  > .x-panel-toolbar .x-tool-restore {
    display: none;
  }

  > div.x-window-tl {
    position: relative !important;
    width: 95vw !important;
    background: _color("secondary", normal) !important;
    padding: 0 !important;
    height: 125px !important;
    box-shadow: 0 4px 10px rgba(59, 61, 64, 0.3);
    border: none !important;
    z-index: 1032 !important;

    .x-window-tr {
      position: relative !important;
      height: 125px !important;
    }

    .x-window-header {
      position: relative !important;
      width: 100% !important;
      background: _color("secondary") !important;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-content: center;
      background: unset !important;
      line-height: 125px !important;
      font-style: normal !important;
      font-weight: 300 !important;
      font-size: 25px !important;

      &::before {
        content: "Publication dashboard" !important;
        color: _color("primary", normal) !important;
        width: 380px !important;
        display: block !important;
        padding-left: 40px !important;
      }

      .x-window-header-text {
        display: none !important;
      }
    }
  }

  > div.x-panel-header {
    position: relative !important;
    background-color: _color("secondary") !important;
    padding: 0 !important;
    height: 125px !important;
    box-shadow: 0 4px 10px rgba(59, 61, 64, 0.3);
    border: none !important;
    z-index: 1032 !important;
    width: 95vw !important;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-content: center;
    line-height: 125px !important;
    font-style: normal !important;
    font-weight: 300 !important;
    font-size: 25px !important;

    &::before {
      content: "Publication dashboard" !important;
      color: _color("primary", normal) !important;
      width: 380px !important;
      display: block !important;
      padding-left: 40px !important;
    }

    .x-panel-header-text {
      display: none !important;
    }

  }

  > .x-window-bwrap {
    position: relative !important;
    z-index: 1032 !important;
    left: 0 !important;
    top: 0 !important;
    width: 95vw !important;
    height: 70% !important;
    padding: 0 !important;
    margin-top: 0 !important;
    overflow: hidden !important;

    .x-window-mc {
      display: flex;
      flex-direction: column;
      height: 100% !important;
    }
  }

  > .x-panel-bwrap {
    position: relative !important;
    z-index: 1032 !important;
    left: 0 !important;
    top: 0 !important;
    width: 95vw  !important;
    height: 70% !important;
    padding: 0 !important;
    margin-top: 0 !important;
    background-color: _color("secondary") !important;
    display: flex;
    flex-direction: column;
  }

  > .x-panel-bwrap, .x-window-bwrap {

    .x-panel-body.x-panel-body-noborder, .x-window-body.x-window-body-noborder {
      overflow: hidden !important;
      flex-grow: 1;
      width: 100% !important;
      height: 100% !important;
    }

    .workflowactiondialog-ctn {
      width: 100% !important;
      height: 100% !important;
      top: 0 !important;
      display: flex;
      flex-direction: column;
      background: _color("secondary", a) !important;

      > .x-component {
        position: relative !important;
      }

      > .x-grid-panel {
        flex-grow: 1;
        flex-shrink: 0;
        height: 20% !important;
        background: _color("secondary", a) !important;
        border-top: none !important;
        border-bottom: 1px solid _color("secondary", d) !important;
        border-left: none !important;
        border-right: none !important;

        .x-grid3 {
          .x-grid3-row {
            height: min-content !important;
            min-height: 48px !important;
            width: auto !important;
            padding: 0 !important;

            &.x-grid3-row-selected {
              background-color: _color("quinary", d) !important;
              color: _color("secondary", normal) !important;

              .x-grid3-cell-inner {
                color: _color("secondary", normal) !important;
              }
            }

            &.x-grid3-row-over {
              background-color: _color("quinary", normal) !important;
              color: _color("secondary", normal) !important;

              .x-grid3-cell-inner {
                color: _color("secondary", normal) !important;
              }
            }
          }

        }

        .x-grid3-row-table {
          width: 100% !important;

          > tbody > tr {
            width: 100% !important;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            flex-direction: row;
            justify-content: space-between;
            min-height: 48px !important;
            // line-height: 48px !important;

            > td:first-child {
              flex-basis: 48px !important;
              width: 48px !important;
              height: 48px !important;
              display: flex;
              justify-content: center;
              align-content: center;
              align-items: center;

              > div {
                width: 24px !important;
                height: 24px !important;
                flex-grow: 0;
                flex-shrink: 0;
                padding: 0 !important;
                margin: 0 !important;

                img {
                  width: 24px !important;
                  height: 24px !important;
                }
              }

            }

            > td:nth-child(2) {
              font-size: _size("medium");
              font-weight: _weight("light");
              display: flex;
              flex-grow: 1;
              justify-content: center;
              align-content: center;
              align-items: center;
              height: 100% !important;

              > div {
                flex-grow: 1;
                flex-shrink: 0;
                height: _size("medium") !important;
                line-height: _size("medium") !important;
                padding: 0 !important;
                margin: 0 !important;
              }
            }

            > td:last-child {
              display: flex;
              justify-content: flex-end;
              align-content: center;
              align-items: center;
              height: 100% !important;
              padding-right: 1% !important;

              > div {
                height: 25px !important;
                flex-grow: 0;
                flex-shrink: 0;
                padding: 0 !important;
                margin: 0 !important;

                .x-panel-fbar {
                  height: 25px !important;
                  @include _button(".button-cancel", "FORM", "remove-icons");
                  @include _button(".button-noworkflow", "FORM", "remove-icons");
                  @include _button(".button-start", "FORM", "remove-icons");
                  @include _button(".button-bypassworkflow", "FORM", "remove-icons");
                }
              }
            }
          }
        }
      }

      > .x-component:nth-child(2) {
        flex-grow: 4;
        flex-shrink: 1;
        top: 0 !important;
        height: 100% !important;

        .workflow-action-dialog {
          height: calc(100%) !important;
          width: 100% !important;

          .x-tab-panel {
            width: 100% !important;
            display: flex;
            flex-direction: row;
            height: 100% !important;
            border: none !important;


            .x-tab-panel-header {
              flex: 0 0 15% !important;
              height: 100% !important;
              border: none !important;
              background: _color("secondary", a) !important;
              top: unset !important;
              box-shadow: none !important;
              position: relative !important;
              display: block !important;
              padding: 2% 0 0 0 !important;

              .x-tab-strip {
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
                border: none !important;
                background-color: unset !important;

                .x-component {
                  flex: 0 0 50px !important;
                }

                li {
                  // Tab entry
                  float: none;
                  margin-left: 0;
                  display: block;

                  &.x-tab-strip-active {
                    background: _color("tertiary", normal);
                  }

                  .x-tab-right {
                    // Button container
                    background: none;
                    padding: 0;
                    margin: 0;

                    .x-tab-left {
                      // ANother button container
                      background: none;
                      padding: 0;

                      .x-tab-strip-inner {
                        // Yet another button container
                        background: none;
                      }
                    }
                  }
                }


              }

              .x-tab-strip .x-tab-strip-inner {
                display: flex;
                flex-direction: row;
                justify-content: flex-end;
                align-content: center;
              }

              ////////// TABS
              .x-tab-strip .x-tab-strip-text {
                // At last the button label !!
                padding: 0 10px 0 0;
                flex: 0 0;
                line-height: 3rem;
                @include text(_size("normal"), _theme($TAB--COLOR, $EDIT-ENGINE), _weight("light"));
              }

              ////////// TAB OVER
              .x-tab-strip-over {
                background: _color("tertiary", a);

                .x-tab-strip-text {
                  // At last the button label !!
                  @include text(_size("normal"), _theme($TAB--COLOR---HOVER, $EDIT-ENGINE) !important, _weight("light"));
                }
              }

              ////////// TAB SELECTED
              .x-tab-strip-active .x-tab-strip-text {
                // At last the button label !!
                @include text(_size("normal"), _theme($TAB--COLOR---SELECTED, $EDIT-ENGINE) !important, _weight("light"));
              }

              ////////// TAB SELECTED & HOVER
              .x-tab-strip-active.x-tab-strip-over .x-tab-strip-text {
                // At last the button label !!
                @include text(_size("normal"), _theme($TAB--COLOR---SELECTED-HOVER, $EDIT-ENGINE) !important, _weight("light"));
              }
            }

            .x-tab-panel-body {
              flex-grow: 2;
              height: 100% !important;
              border-top: none !important;
              border-left: 1px solid _color("secondary", d) !important;
              border-bottom: none !important;
              border-right: none !important;
              width: 100% !important;
              padding: 2% !important;
              background: _color("secondary", a) !important;
              position: relative !important;
              display: block !important;
              margin: 0 !important;

              .workflow-dialog-action-tab.x-border-layout-ct {
                height: calc(100%) !important;
                width: 100% !important;
                display: flex;
                flex-direction: column;
                position: relative !important;

                .x-border-panel:first-child {
                  flex: 0 0 4rem !important;
                  position: relative !important;
                  top: unset !important;
                  left: unset !important;
                  overflow-y: auto !important;

                  .x-component {
                    line-height: 3rem !important;
                  }

                  td {
                    line-height: 3rem !important;
                    vertical-align: baseline !important;

                    .x-component {
                      @include text(_size("medium"), _color("primary", d), _weight("semibold"));
                      line-height: initial !important;
                    }

                    img {
                      width: 16px !important;
                      height: 100%;
                      object-fit: contain;
                    }
                  }
                }

                .x-border-panel:last-child {
                  flex: 1 1 !important;
                  position: relative !important;
                  width: 100% !important;
                  height: 100% !important;
                  top: unset !important;
                  left: unset !important;

                  .x-panel-bwrap {
                    width: 100% !important;
                    height: 100% !important;

                    fieldset {
                      border: none !important;
                      background: none !important;

                      .x-form-text {
                        @include text(_size("normal"), _theme($TAB--COLOR, $EDIT-ENGINE), _weight("light"));
                        line-height: 2rem !important;
                        background: _color("secondary", d) !important;
                      }

                      .x-form-text:hover {
                        background: _color("secondary") !important;
                      }

                      .x-form-text:focus {
                        background: _color("secondary") !important;
                      }
                    }
                  }
                }
              }

              .workflow-dialog-comments-tab.x-border-layout-ct {
                height: 100% !important;
                width: 100% !important;
                display: flex;
                flex-direction: column-reverse;
                position: relative !important;

                .x-border-panel:first-child {
                  flex: 5 1 2rem !important;
                  position: relative !important;
                  top: unset !important;
                  left: unset !important;
                  margin-top: 10px;

                  table {
                    width: 100% !important;

                    .x-component {
                      width: 100% !important;
                      @include text(_size("normal"), _theme($TAB--COLOR, $EDIT-ENGINE), _weight("light"));
                      line-height: 2rem !important;
                      height: 2rem !important;
                    }

                    tr {
                      display: flex !important;
                      flex-direction: row;
                      width: 100% !important;
                      @include text(_size("normal"), _theme($TAB--COLOR, $EDIT-ENGINE), _weight("light"));
                      line-height: 2rem !important;
                      height: 2rem !important;

                      td {
                        flex: 0 0 50% !important;
                        padding: 0 !important;

                        tbody {
                          display: flex !important;
                          flex-direction: row-reverse;
                          width: 100% !important;
                          @include text(_size("medium"), _theme($TAB--COLOR, $EDIT-ENGINE), _weight("light"));
                          line-height: 2rem !important;
                          height: 2rem !important;

                          tr {
                            flex-grow: 1 !important;

                            td {
                              padding: 0 !important;
                              flex: 0 0 100% !important;
                            }
                          }
                        }
                      }
                    }
                  }

                }

                .x-border-panel:last-child {
                  flex: 1 1 !important;
                  position: relative !important;
                  width: 100% !important;
                  height: 100% !important;
                  top: unset !important;
                  left: unset !important;

                  .x-panel-bwrap {
                    width: 100% !important;
                    height: 100% !important;

                    form {
                      display: flex !important;
                      flex-direction: column !important;
                      justify-content: flex-start;
                      height: auto !important;
                      align-content: flex-end;
                      align-items: flex-end;

                      .x-form-item {
                        flex: 0 0 8rem !important;
                        width: 100% !important;
                        margin: 0 !important;
                        border: none !important;
                      }

                      .x-form-item-label {
                        @include text(_size("medium"), _theme($TAB--COLOR, $EDIT-ENGINE), _weight("light"));
                        line-height: 2rem !important;
                        height: 2rem !important;
                      }

                      .x-form-element {
                        display: flex;
                        flex-direction: row;
                        justify-content: center;
                        align-items: center;
                        align-content: center;

                        .x-form-textarea {
                          @include text(_size("normal"), _theme($TAB--COLOR, $EDIT-ENGINE), _weight("light"));
                          line-height: 1rem !important;
                          height: 6rem !important;
                          background: _color("secondary", d) !important;
                          flex-grow: 1;
                          flex-basis: 100%;
                          width: 100%;
                        }

                        .x-form-textarea:hover {
                          background: _color("secondary") !important;
                        }

                        .x-form-textarea:focus {
                          background: _color("secondary") !important;
                        }

                        img.x-component {
                          flex-grow: 0;
                          flex-shrink: 0;
                          flex-basis: 16px !important;
                          position: static !important;
                        }
                      }

                      > table {
                        position: relative !important;
                        width: 20% !important;
                      }

                      button.x-btn-text {
                        position: relative !important;
                        top: 0 !important;
                        height: 40px !important;
                        z-index: 1032 !important;
                        max-width: 150px !important;
                      }
                    }
                  }
                }
              }

              .workflow-dialog-publication-tab {
                height: calc(100%) !important;
                width: 100% !important;
                display: flex;
                flex-direction: column;
                position: relative !important;

                .x-component.x-border {
                  height: 100% !important;
                  width: 100% !important;

                  .x-grid-group {
                    .x-grid-group-hd {
                      border: none;
                      padding: 4px 0;
                      padding-top: 8px;

                      .x-grid-group-div {
                        @include text(_size("medium"), _theme($TAB--COLOR, $EDIT-ENGINE), _weight("light"));
                        padding-left: 11px;
                        background-image: url(../images/icons/icon-toggle-expanded-small-normal.png); /* OPTIMISE URL ::: css/app/workflow/_overrides.scss ::: 1 */
                        background-size: 7px 5px;
                        background-position: left;
                      }
                    }

                    .x-grid-group-body {
                      display: flex !important;
                      flex-direction: column;
                      width: 100% !important;

                      .x-grid3-row {
                        flex: 0 0 100% !important;

                        &.x-grid3-row-over {
                          background: _color("secondary", d) !important
                        }

                        &.x-grid3-row-selected {
                          .x-grid3-cell-inner {
                            color: _color("primary", normal) !important;
                          }
                        }

                        table {
                          width: 100% !important;

                          tr {
                            display: flex;
                            flex-direction: row;
                            width: 100% !important;

                            td {
                              flex-grow: 1;
                            }

                            td:nth-child(4) {
                              flex-grow: 2;
                              width: 100% !important;
                            }
                          }
                        }

                        .x-grid3-col-action {
                          @include _button(".button-compare", "FORM", "remove-icons");
                          @include _button(".button-review", "FORM", "remove-icons");
                        }
                      }
                    }
                  }

                  .x-grid-group-collapsed {
                    .x-grid-group-div {
                      @include text(_size("medium"), _theme($TAB--COLOR, $EDIT-ENGINE), _weight("light"));
                      padding-left: 11px;
                      background-image: url(../images/icons/expand-side-panel@X2.png) !important;
                      background-size: 5px 7px;
                      background-position: left;
                    }


                    .x-grid-group-body {
                      display: none !important;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  .x-tab-panel .x-tab-panel-body {
    overflow: auto;
    overflow-x: hidden;
    border: none !important;

    &:nth-child(2) { /* OPTIMISE SELECTOR ::: css/app/workflow/_publication-dashboard.scss ::: 1 */
      overflow-y: hidden;
      height: calc(100% - 18px) !important;
    }
  }

  .x-panel-bbar, .x-window-bbar {
    flex-grow: 0;
    flex-basis: 45px !important;
    height: 45px !important;
    width: 100% !important;
    background-color: _color("secondary") !important;

    > .x-panel-fbar {
      height: 36px !important;
      width: 100% !important;
      @include _button(".button-cancel", "ACTIONBAR---SECONDARY", "remove-icons");
      @include _button(".button-noworkflow", "ACTIONBAR---SUGGESTED", "remove-icons");
      @include _button(".button-start", "ACTIONBAR---SUGGESTED", "remove-icons");
      @include _button(".button-bypassworkflow", "ACTIONBAR---SUGGESTED", "remove-icons");

      > table {
        width: 100% !important;
        display: block;

        > tbody {
          width: 100% !important;
          display: block;

          > tr {
            width: 100% !important;
            display: flex;
            flex-direction: row-reverse;

            .x-toolbar-left-row {
              display: flex !important;
              flex-direction: row;

              > td.x-toolbar-cell:first-child {
                order: 2;
              }
              > td.x-toolbar-cell:nth-child(2) {
                order: 3;
              }
              > td.x-toolbar-cell:last-child {
                order: 1;
              }
            }
          }
        }
      }
    }
  }


  > .x-panel-bwrap > .x-panel-bbar, > .x-window-bwrap > .x-window-bbar {
    .x-panel-fbar .x-toolbar-cell {
      padding-bottom: 0 !important;
      float: right;
      margin-left: 5px !important;
    }
  }
}
